<template>
    <div class="content-container content-panel">
        <h3 class="main-title">
            <a-row align="middle" type="flex">
                <a-col :span="8" class="left">检验任务</a-col>
            </a-row>
        </h3>
        <!-- 不同的组件 -->
        <div class="content">
            <!-- 按钮和模糊搜索 -->
            <div class="buttons">
                <a-row style="margin-bottom: 10px;">
                    <a-col :span="12">
                        <a-button type="primary" @click="handleGoDetail('','add')">新增</a-button>
                    </a-col>
                    <a-col :span="12" class="a-col-custom">
                        <div class="lines-row">
                            <a-input-search
                                v-model="searchform.matchParam"
                                placeholder="任务编码/物料编码/物料名称"
                                @search="init"
                                enterButton
                            />
                        </div>
                        <div class="lines-row">
                            <a @click="advanceSearchShowClk" class="queryText">
                                高级搜索
                                <a-icon :type="expand ? 'up' : 'down'" />
                            </a>
                        </div>
                    </a-col>
                </a-row>
            </div>
            <!-- 高级搜索展开条件表单 -->
            <div class="query-content" :style="{ display: expand ? 'block' : 'none' }">
                <a-form :form="searchform" @submit="handleSearch" hideRequiredMark>
                    <div class="row-container">
                        <a-form-item label="任务编码">
                            <a-input v-model="searchform.planCode" />
                        </a-form-item>
                        <a-form-item label="物料编码">
                            <a-input v-model="searchform.productCode" />
                        </a-form-item>
                        <a-form-item label="物料名称">
                            <a-input v-model="searchform.planCode" />
                        </a-form-item>
                        <a-form-item label="项目编码">
                            <a-input v-model="searchform.planCode" />
                        </a-form-item>
                        <a-form-item label="项目名称">
                            <a-input v-model="searchform.planCode" />
                        </a-form-item>
                        <a-form-item label="检验结果">
                            <a-select v-model="searchform.result">
                                <a-select-option
                                    v-for="p in dict.qcResultsOptions"
                                    :key="p.code"
                                    :value="p.value"
                                >{{ p.label }}</a-select-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label="检验类型">
                            <a-input v-model="searchform.productCode" />
                        </a-form-item>
                        <a-form-item label="取样位置">
                            <a-input v-model="searchform.planCode" />
                        </a-form-item>
                        <a-form-item label="状态">
                            <a-input v-model="searchform.planCode" />
                        </a-form-item>
                        <template v-if="displayAll">
                            <a-form-item label="标准类型">
                                <a-select v-model="form.type" placeholder="选择类型">
                                    <a-select-option
                                        v-for="option in dict.standardOptions"
                                        :key="option.code"
                                        :value="option.value"
                                    >{{ option.label }}</a-select-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item label="计划检验时间">
                                <a-range-picker @change="onChange" />
                            </a-form-item>
                        </template>
                    </div>
                    <a-divider orientation="right" dashed class="search-divider">
                        <span @click="showMoreItems">
                            {{ displayAll ? $t('monitor.alarm.stow') : $t('monitor.alarm.moreItem')}}
                            <a-icon
                                :type="displayAll ? 'up' : 'down'"
                                :style="{ fontSize: '12px', color: '#1890ff' }"
                            />
                        </span>
                    </a-divider>
                    <a-row :gutter="16">
                        <a-col :span="24" :style="{ textAlign: 'right' }">
                            <a-button type="primary" html-type="submit">{{ $t("common.search") }}</a-button>
                            <a-button
                                :style="{ marginLeft: '8px' }"
                                @click="handleReset"
                            >{{ $t("common.reset") }}</a-button>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
            <!-- 主表 -->
            <a-table
                :columns="columns"
                :dataSource="dataSource"
                :rowKey="record => record.id"
                :loading="loading"
                size="middle"
                :pagination="false"
                :scroll="{ x: 1500 }"
            >
                <template slot="index" slot-scope="text, record, index">
                    <span>{{ queryParams.pageSize * (queryParams.pageNum - 1) + index + 1 }}</span>
                </template>
                <template slot="status" slot-scope="text, record">
                    <a-tag
                        :color="dict.status.task[record.status -1].color"
                    >{{ dict.status.task[record.status -1].label }}</a-tag>
                </template>
                <template slot="inspectType" slot-scope="text, record">
                    <a-tag
                        :color="dict.qcTypeOptions[record.inspectType -1].color"
                    >{{ dict.qcTypeOptions[record.inspectType -1].label }}</a-tag>
                </template>
                <template slot="result" slot-scope="text,record">
                    <a-tag
                        :color="record.result?dict.qcResultsOptions[record.result].color:''"
                    >{{ record.result?dict.qcResultsOptions[record.result].label:'' }}</a-tag>
                </template>
                <template slot="action" slot-scope="text, record">
                    <span>
                        <span v-show="['1','2','3','4','5','6'].includes(record.status)">
                            <a href="javascript:;" @click="handleGoDetail(record,'detail')">详情</a>
                            <a-divider type="vertical" />
                        </span>
                        <span v-show="['1','2','3'].includes(record.status)">
                            <a href="javascript:;" @click="handleGoDetail(record,'edit')">编辑</a>
                            <a-divider type="vertical" />
                        </span>
                        <span v-show="['1'].includes(record.status)">
                            <a href="javascript:;" @click="handleSubmitRow(record)">提交</a>
                            <a-divider type="vertical" />
                        </span>
                        <span v-show="['4'].includes(record.status)">
                            <a href="javascript:;" @click="handleGoDetail(record,'confirm')">确认</a>
                            <a-divider type="vertical" />
                        </span>
                        <span v-show="['1','2','3','4'].includes(record.status)">
                            <a href="javascript:;" @click="handleStopRow(record)">中止</a>
                            <a-divider type="vertical" />
                        </span>
                        <span v-show="['4'].includes(record.status)">
                            <a href="javascript:;" @click="handleReviewRow(record)">复检</a>
                            <a-divider type="vertical" />
                        </span>
                        <span v-show="['1'].includes(record.status)">
                            <a href="javascript:;" @click="handleDeleteRow(record)">删除</a>
                        </span>
                    </span>
                </template>
            </a-table>
            <div style="margin-top: 10px; float: right;">
                <LibsPagination
                    :pageNum="pageNum"
                    :pageSize="pageSize"
                    :total="total"
                    :current="current"
                    @currentPageChange="currentPageChange"
                    @pageSizeChange="pageSizeChange"
                ></LibsPagination>
            </div>
            <div style="clear:both"></div>
        </div>
    </div>
</template>

<script>
import "@/assets/query.css";
import dict from "../dict.json";
import { mapState } from "vuex";
import LibsCommonBasics from "libs-common-basics";
const columns = [
    {
        title: "序号",
        dataIndex: "index",
        scopedSlots: { customRender: "index" },
        width: 90,
        align: "center",
    },
    {
        title: "任务编码",
        dataIndex: "code",
        width: 140,
    },
    {
        title: "物料编码",
        dataIndex: "materialCode",
        width: 150,
    },
    {
        title: "物料名称",
        dataIndex: "materialName",
        width: 150,
    },
    {
        title: "批号",
        dataIndex: "lotNo",
        width: 150,
    },
    {
        title: "物料类型",
        dataIndex: "materialType",
        width: 150,
    },
    {
        title: "检验结果",
        dataIndex: "resultName",
        width: 220,
    },
    {
        title: "检验标准",
        dataIndex: "inspectStandardName",
        width: 150,
    },
    {
        title: "取样位置",
        dataIndex: "samplingSite",
        width: 150,
    },
    {
        title: "取样料量",
        dataIndex: "samplingQuantity",
        width: 150,
    },
    {
        title: "计划检验时间",
        dataIndex: "planTime",
        width: 150,
    },
    {
        title: "状态",
        dataIndex: "status",
        width: 150,
        scopedSlots: { customRender: "status" },
    },
    {
        title: "检验类型",
        dataIndex: "inspectType",
        width: 150,
        scopedSlots: { customRender: "inspectType" },
    },
    {
        title: "操作",
        key: "action",
        width: 350,
        scopedSlots: { customRender: "action" },
    },
];

export default {
    data() {
        return {
            dict,
            columns,
            expand: false,
            displayAll: false,
            searchform: {},
            form: {},
            queryParams: {
                data: {},
                pageNum: parseInt(LibsCommonBasics.LibsPagination.props.pageNum.default),
                pageSize: parseInt(LibsCommonBasics.LibsPagination.props.pageSize.default),
            },
        };
    },
    methods: {
        // 切换页码
        currentPageChange({ current }) {
            let self = this;
            self.$store.state.QCTask.loading = true;
            self.$store.state.QCTask.pager.pageNum = current;
            self.queryParams.pageNum = current;
            this.init();
        },
        // 切换当前页记录数
        pageSizeChange({ pageSize }) {
            let self = this;
            self.$store.state.QCTask.loading = true;
            self.$store.state.QCTask.pager.pageNum = 1;
            self.$store.state.QCTask.pager.pageSize = pageSize;
            self.queryParams.pageNum = 1;
            self.queryParams.pageSize = pageSize;
            this.init();
        },
        //高级搜索开关
        advanceSearchShowClk() {
            this.expand = !this.expand;
        },
        // 更多筛选
        showMoreItems() {
            this.displayAll = !this.displayAll;
        },
        // 跳转到详情页
        handleGoDetail(data, flag) {
            this.$router.push({
                path: "taskDetail",
                query: {
                    data: data,
                    flag: flag,
                },
            });
        },
        //高级查询
        handleSearch(e) {
            let self = this;
            self.queryParams.pageNum = parseInt(LibsCommonBasics.LibsPagination.props.pageNum.default);
            self.$store.state.QCTask.loading = true;
            self.init();
        },
        //重置查询表单
        handleReset() {
            // this.searchform.resetFields();
            this.searchform = {};
        },
        // 提交到ERP
        handleSubmitRow(record) {
            let self = this;
            self.$confirm({
                title: "确认",
                content: "确定提交?",
                okText: "确定",
                cancelText: "取消",
                onOk() {
                    let params = { id: record.id };
                    self.$store
                        .dispatch(dict.action.task.submitAction, params)
                        .then(res => {
                            if (parseInt(res.code) === 1) {
                                self.$message.success("成功");
                                self.init();
                            } else {
                                self.$message.error("失败" + res.msg + "(" + res.code + ")");
                            }
                        })
                        .catch(err => {});
                },
            });
        },
        // 中止当前行数据
        handleStopRow(rowData) {
            let self = this;
            self.$confirm({
                title: "确认",
                content: "确定中止?",
                okText: "确定",
                cancelText: "取消",
                onOk() {
                    let params = { id: rowData.id };
                    self.$store
                        .dispatch(dict.action.task.stopAction, params)
                        .then(res => {
                            if (parseInt(res.code) === 1) {
                                self.$message.success("成功");
                                self.init();
                            }
                        })
                        .catch(err => {
                            self.$message.error("失败" + res.msg + "(" + res.code + ")");
                        });
                },
            });
        },
        // 复检当前行数据
        handleReviewRow(rowData) {
            let self = this;
            self.$confirm({
                title: "确认",
                content: "确定复检?",
                okText: "确定",
                cancelText: "取消",
                onOk() {
                    let params = { id: rowData.id };
                    this.$store
                        .dispatch(dict.action.task.reviewAction, params)
                        .then(res => {
                            if (parseInt(res.code) === 1) {
                                self.$message.success("成功");
                                self.init();
                            }
                        })
                        .catch(err => {
                            self.$message.error("失败" + res.msg + "(" + res.code + ")");
                        });
                },
            });
        },
        // 删除当前行数据
        handleDeleteRow(rowData) {
            let self = this;
            self.$confirm({
                title: "确认",
                content: "确定?",
                okText: "确定",
                cancelText: "取消",
                onOk() {
                    let params = { ids: [rowData.id] };
                    self.$store
                        .dispatch(dict.action.task.deleteAction, params)
                        .then(res => {
                            if (parseInt(res.code) === 1) {
                                self.$message.success("成功");
                                self.init();
                            }
                        })
                        .catch(err => {
                            this.$message.error("失败" + res.msg + "(" + res.code + ")");
                        });
                },
            });
        },
        init() {
            this.$store.dispatch(dict.action.task.queryAction, this.queryParams);
        },
    },
    computed: {
        ...mapState({
            loading: state => state.QCTask.loading, // 列表数据加载状态
            dataSource: state => state.QCTask.dataSource,
            // 分页监听
            pageNum: state => parseInt(state.QCTask.pager.pageNum),
            pageSize: state => parseInt(state.QCTask.pager.pageSize),
            total: state => parseInt(state.QCTask.pager.total),
            current: state => parseInt(state.QCTask.pager.current),
            selectedRowKeys: state => state.QCTask.selectedRowKeys,
        }),
    },
    mounted() {
        this.init();
    },
};
</script>
